<template>
  <div class="main">
    <ul>
      <li v-for="(item,i) in classes" :key="i">
        <router-link :to="'/details/'+item.id">
          {{item.title}}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import {getClassByType} from '../../api/classify'
  export default {
    props:['type'],
    data(){
      return{
        classes:[]
      }
    },
    methods:{
   
    },
    watch:{
      type(){
      getClassByType(this.type).then(res=>{
        this.classes=res.data
      })
      }
    }
  }
</script>

<style scoped>
.main{
  height: 100%;
  overflow: auto;
  flex: 1;
  padding: 0.2rem;
}
ul{
  display: flex;
  flex-wrap: wrap;
}
li{
  width: 1.66rem;
  height: 0.66rem;
  border: 1px solid #eceef1;
  border-radius: 0.34rem;
  font-size: 0.26rem;
  text-align: center;
  line-height: 0.66rem;
  margin-right: 0.1rem;
  margin-bottom: 0.33rem;
}
</style>